import React from 'react';
import style from "./Marquee.module.css";
import Marquee from 'react-fast-marquee';
// 跑马灯
function Marqueeone() {
    const logos = [
        'https://cdn.dancf.com/fe-assets/20240326/6ce218c2f66fa6a3798cd5680419f94e.png',
        'https://cdn.dancf.com/fe-assets/20240326/4de240fe4534236f974e540e063e76d9.png',
        'https://cdn.dancf.com/fe-assets/20240326/a9ad647588bf921ea2f40cc4c96d31b3.png',
        'https://cdn.dancf.com/fe-assets/20240326/26a91384853dfbdb6df0dc3140929843.png',
        'https://cdn.dancf.com/fe-assets/20240326/bf1fd26d1a1e1792032d00c2daa0cce7.png'
    ];

    return (
        <div className={style.easing}>
            <div className={style.blurMask}>
                {logos.map((logo, index) => (
                    <Marquee key={index}
                        gradient={true}
                        speed={50}
                        gradientColor=''
                        gradientWidth={400}
                        direction={index % 2 === 0 ? 'right' : 'left'}>
                        <div className={style.marqueeContainer}>
                            <img src={logo} className={style.marqueeLogo} />
                        </div>
                    </Marquee>
                ))}
            </div>
        </div>
    );
}

export default Marqueeone;
